import QtQuick
import FluentUI
import QtQuick.Controls

// 快速开始
FluRectangle {
    radius: [25, 25, 25, 25]
    width: mainWindow.width * 0.26
    height: mainWindow.height * 0.47 - mainWindow.width * 0.02
    color: "#FFFFFF"

    Text {
        x: 25
        y: parent.height * 0.03
        text: "快速开始"
        font.pointSize: 9 * fontSizeFactor
        font.family: "MiSans"
        font.weight: Font.DemiBold
        color: "#0A1629"
    }

    Column {
        anchors.fill: parent
        spacing: parent.height * 0.1
        // 占位
        Rectangle {
            width: parent.width
            height: parent.height * 0.1
            color: "transparent"
        }

        // 题库
        FluRectangle {
            id: questionBankRect
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width * 0.8
            height: parent.height * 0.15
            radius: [15, 15, 15, 15]
            color: "#EBF3FF"

            Row {
                anchors.fill: parent
                // 占位
                Rectangle {
                    width: parent.width * 0.25
                    height: parent.height
                    color: "transparent"
                }
                FluImage {
                    anchors.verticalCenter: parent.verticalCenter
                    height: parent.height * 0.45
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/QuestionBankIcon.png"
                }
                // 占位
                Rectangle {
                    width: parent.width * 0.1
                    height: parent.height
                    color: "transparent"
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "题库"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    questionBankRect.scale = 1.2
                }
                onExited: {
                    questionBankRect.scale = 1.0
                }
            }
            // Q弹动画
            Behavior on scale {
                PropertyAnimation {
                    duration: 200
                    easing.type: Easing.OutBounce
                }
            }
        }

        // 详细报告
        FluRectangle {
            id: detailReportRect
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width * 0.8
            height: parent.height * 0.15
            radius: [15, 15, 15, 15]
            color: "#B8CFFF"
            Row {
                anchors.fill: parent
                // 占位
                Rectangle {
                    width: parent.width * 0.25
                    height: parent.height
                    color: "transparent"
                }
                FluImage {
                    anchors.verticalCenter: parent.verticalCenter
                    height: parent.height * 0.45
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/DetailReportIcon.png"
                }
                // 占位
                Rectangle {
                    width: parent.width * 0.1
                    height: parent.height
                    color: "transparent"
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "详细报告"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    detailReportRect.scale = 1.2
                }
                onExited: {
                    detailReportRect.scale = 1.0
                }
            }
            // Q弹动画
            Behavior on scale {
                PropertyAnimation {
                    duration: 200
                    easing.type: Easing.OutBounce
                }
            }
        }

        // 模拟面试
        FluRectangle {
            id: mockInterviewRect
            anchors.horizontalCenter: parent.horizontalCenter
            width: parent.width * 0.8
            height: parent.height * 0.15
            radius: [15, 15, 15, 15]
            color: "#568CFB"
            Row {
                anchors.fill: parent
                // 占位
                Rectangle {
                    width: parent.width * 0.25
                    height: parent.height
                    color: "transparent"
                }
                FluImage {
                    anchors.verticalCenter: parent.verticalCenter
                    height: parent.height * 0.45
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/MockInterviewRectIcon.png"
                }
                // 占位
                Rectangle {
                    width: parent.width * 0.1
                    height: parent.height
                    color: "transparent"
                }
                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "模拟面试"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    mockInterviewRect.scale = 1.2
                }
                onExited: {
                    mockInterviewRect.scale = 1.0
                }
            }
            // Q弹动画
            Behavior on scale {
                PropertyAnimation {
                    duration: 200
                    easing.type: Easing.OutBounce
                }
            }
        }
    }
}
